<template>
  <div>
    <div class="w">
      <div class="navigation">
        <van-tabs>
          <van-tab title="菜单">
            <div class="menu">
              <ul>
                <li v-show="collectionList.length">
                  <div @click="toFavoritesMenu" class="img">
                    <div
                      :class="[
                        { picOne: collectionList.length == 1 },
                        { picTwo: collectionList.length == 2 },
                        { pic: collectionList.length >= 3 },
                      ]"
                      v-for="(item, index) in collectionList"
                      :key="index"
                      v-show="index < 4"
                    >
                      <img :src="item.foodImg" :height="'100%'" alt="" />
                    </div>
                  </div>
                  <div class="texts">
                    <p>
                      {{
                        collectionList.length > 1
                          ? "全部收藏"
                          : collectionList.length == 0
                          ? "没有收藏"
                          : "一个收藏"
                      }}
                    </p>
                    <p>{{ collectionList.length }}道菜谱</p>
                  </div>
                </li>
              </ul>
            </div>
          </van-tab>
          <van-tab title="课程"></van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["collectionList"],
  data() {
    return {};
  },
  methods: {
    toFavoritesMenu() {
      this.$router.push({
        path: "favoritesMenu",
      });
    },
  },
  created() {},
};
</script>

<style>
@import "../assets/css/collection.css";
</style>